<template>
    <div class="login-box">
        <div class="content">
            <p>
               登录系统
            </p>
            <p>
                <el-input v-model="query.account" placeholder="请输入用户账号"></el-input>
            </p>
            <p>
                <el-input type="password" v-model="query.password" placeholder="请输入用户密码"></el-input>
            </p>
            <p>
                <el-checkbox v-model="remember" @change="rememberChange">记住密码</el-checkbox>
            </p>
            <p>
                <el-button @click="onLogin" type='primary'>登录</el-button>
            </p>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            query: {
                "account": "",
                "password": ""
            },
            remember: false
        }
    },

    created() {
        this.initLocalStorage()
    },
    methods: {
        async onLogin() {
            if(!this.query.account || !this.query.password) {
                this.$message({
                    message: '请输入账号密码',
                    type: 'warning'
                    });
                return
            }
            this.$router.push('/home')
        },
        // 记住密码
        rememberChange() {
            if (this.remember) {
                localStorage.setItem('user', JSON.stringify(this.query))
            } else {
                localStorage.removeItem('user')
            }
        },
        // 初始化localStorage是否有记住密码
        initLocalStorage() {
            let user = localStorage.getItem('user')
            if (user) {
                this.query = JSON.parse(user)
                this.remember = true
            } else {
                this.query = {}
                this.remember = false
            }
        },
    }
}
</script>

<style lang="less" scoped>
    .login-box {
        display: block;
        position: relative;
        height: 100%;
        > .content {
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            width: 680px;
            height: 360px;
            background: #fff;
            margin: -180px auto auto -340px;
            border: solid 1px #ddd;
            border-radius: 10px;
            padding: 16px;
        }
    }
</style>